<template>
  <div
    :style="{ borderLeft: `5px solid ${task.color || '#1890ff'}`, marginBottom: '16px', borderRadius: '8px', overflow: 'hidden' }"
    class="task-card"
    @dragstart="dragStart"
  >
    <div class="card-header">
      <h3 style="margin: 0">{{ task.id }} {{ task.name }}</h3>
      <a-tag :color="priorityColor"><label>优先级：</label>{{ priorityText }}</a-tag>
    </div>
    
    <p class="description">{{ task.description }}</p>
    
    <a-row class="info-row">
      <a-col :span="12" class="info-item">
        <label>类型:</label>
        <a-tag>{{ typeText }}</a-tag>
      </a-col>
      <a-col :span="12" class="info-item">
        <label>剩余次数:</label>
        <a-tag color="purple">
          {{ task.remainTime || '无限制' }}
        </a-tag>
      </a-col>
    </a-row>

    <a-button v-if="!isExpanded" @click="toggleExpand" class="expand-btn">
      展开更多
    </a-button>
    <div v-else class="expanded-content">
      <a-row :gutter="16" class="info-row">
    
          <div class="info-item">
            <label>状态:</label>
            <a-tag :color="statusColor">{{ statusText }}</a-tag>
          </div>
          <div class="info-item">
            <label>持续时间:</label>
            <span>{{ task.duration||'--'}}分钟</span>
          </div>
          <div class="info-item">
            <label>父任务ID:</label>
            <span>{{ task.parentId || '无' }}</span>
          </div>
          <div class="info-item">
            <label>创建时间:</label>
            <span>{{ formatTime(task.createTime)}}</span>
          </div>
          <div class="info-item">
            <label>更新时间:</label>
            <span>{{ formatTime(task.updateTime) }}</span>
          </div>
          <div class="info-item">
            <label>时间范围:</label>
            <span>{{ task.startDay }} ~ {{ task.endDay }}</span>
          </div>
      </a-row>
      <a-button @click="toggleExpand" class="expand-btn">
        收起
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from 'vue';

const props = defineProps({
  task: {
    type: Object,
    required: false,
  },
});
onMounted(() => {
});

const emit = defineEmits(['card-drag']);
const dragStart = (dragTask) => {
  // 将任务的 id 存储到拖拽事件的数据传输对象中
  // 将任务的 JSON 数据存储到 dataTransfer 对象中
  dragTask.dataTransfer.setData('application/json', JSON.stringify(props.task));
  emit('card-drag', props.task.id);
};

const task = ref(props.task);

const isExpanded = ref(false);

const priorityText = computed(() => ['低', '中', '高', '紧急'][task.value.priority]);
const typeText = computed(() => ['一次性任务', '目标性任务', '日常性任务', '复杂型任务'][task.value.type]);
const priorityColor = computed(() => ['#87d068', '#2db7f5', '#ff5500', '#f50'][task.value.priority]);
const statusText = computed(() => ['未开始', '进行中', '已完成'][task.value.status]);
const statusColor = computed(() => ['#999', '#2db7f5', '#87d068'][task.value.status]);

function formatTime(time) {
  if (!time) return '--';
  return time.replace(' ', ' · ');
}

function toggleExpand() {
  isExpanded.value = !isExpanded.value;
}
</script>

<style scoped>
.task-card {
  cursor: move;
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.task-card:hover {
  background-color: #d3d4df;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 16px 0;
}

.description {
  color: #666;
  margin: 12px 16px;
}

.info-row {
  margin: 0 8px;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 8px;
}

.info-item label {
  color: #146f3d;
  min-width: 40px;
}

.expand-btn {
  cursor: pointer;
  margin: 12px 5px;
  width: 90%;
}

.expanded-content {
  margin: 12px 16px;
}
</style>